<template>
  <div v-if="detialvisible">
    <el-dialog :visible="detialvisible" :title="formatTitle(detailMode)" class="detailWarp" width="60%" @close="closeDialog">
      <!-- {{ detailMode }}
      {{ myindex }} -->
      <!-- 确认有房 -->
      <div class="storeOrder_title">
        订单状态：{{ ditaillist.orderStatus | formatRoomOrder }}
      </div>
      <el-form v-if="detailMode === 'confirmRoom'" class="storeOrder">
        <!-- <h3 class="ml20">订单信息</h3> -->
        <el-form-item :label-width="labeWidth" label="订单编号">
          <el-input v-model="ditaillist.orderSn" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="房型名称">
          <el-input v-model="ditaillist.roomName" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="间夜数量">
          <el-input v-model="ditaillist.totalNum" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="入住日期">
          <el-input v-model="ditaillist.checkInTime" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="离店日期">
          <el-input v-model="ditaillist.checkOutTime" disabled="disabled" class="input" />
        </el-form-item>
        <hr>
        <p class="askTip"><i class="el-icon-warning warning"/>是否确认该订单?</p>
        <div style="width:100%; text-align:center">
          <el-button v-preventReClick :disabled="false" @click="closeDialog">取消</el-button>
          <el-button v-preventReClick type="primary" @click="confirmRoom()">确认</el-button>
        </div>
      </el-form>

      <!-- 取消 -->
      <el-form v-if="detailMode == 'cancelRoom'" class="storeOrder">
        <!-- <h3 class="ml20">订单信息</h3> -->
        <el-form-item :label-width="labeWidth" label="订单编号">
          <el-input v-model="ditaillist.orderSn" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="房型名称">
          <el-input v-model="ditaillist.roomName" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="间夜数量">
          <el-input v-model="ditaillist.totalNum" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="入住日期">
          <el-input v-model="ditaillist.checkInTime" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="离店日期">
          <el-input v-model="ditaillist.checkOutTime" disabled="disabled" class="input" />
        </el-form-item>
        <hr>
        <el-form-item :label-width="labeWidth" label="订单总额">
          <el-input v-model="ditaillist.totalAmount" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="退款金额">
          <el-input v-model="ditaillist.totalAmount" disabled="disabled" class="input" />
          <p class="f_red">确定取消订单后，退款按支付路径原路返还</p>
        </el-form-item>
        <hr>
        <p class="askTip"><i class="el-icon-warning warning"/>是否确认取消该订单?</p>
        <div style="width:100%; text-align:center">
          <el-button v-preventReClick :disabled="false" @click="closeDialog">取消</el-button>
          <el-button v-preventReClick type="primary" @click="cancelRoom()">确认</el-button>
        </div>
      </el-form>

      <!-- 同意退款 -->
      <div v-if="detailMode == 'agreeRefund'">
        <h3 class="ml20">订单信息</h3>
        <table class="table">
          <tr>
            <td>订单编号:</td>
            <td>{{ ditaillist.orderSn }}</td>
            <td>下单时间:</td>
            <td>{{ ditaillist.createTime }}</td>
          </tr>
          <tr>
            <td>房型名称:</td>
            <td>{{ ditaillist.roomName }}</td>
            <td>类型:</td>
            <td>{{ ditaillist.roomType }}</td>
          </tr>
          <tr>
            <td>入住日期:</td>
            <td>{{ ditaillist.checkInTime }}</td>
            <td>离店日期:</td>
            <td>{{ ditaillist.checkOutTime }}</td>
          </tr>
          <tr>
            <td>单价:</td>
            <td>{{ ditaillist.roomSalePrice }}元</td>
            <td>间夜数量:</td>
            <td>{{ ditaillist.totalNum }}</td>
          </tr>
          <tr>
            <td>总价:</td>
            <td>{{ ditaillist.totalAmount }}元</td>
          </tr>
        </table>
        <hr>
        <h3 class="ml20">退款信息</h3>
        <div class="storeOrder_title">
          退款状态：{{ ditaillist.orderStatus | formatRoomOrder }}
        </div>
        <table class="table">
          <tr>
            <td>退款单号:</td>
            <td>{{ ditaillist.roomRefundOrder.refundOrderSn }}</td>
            <td>申请退款时间:</td>
            <td>{{ ditaillist.roomRefundOrder.createTime }}</td>
          </tr>
          <tr>
            <td>订单金额:</td>
            <td>{{ ditaillist.roomRefundOrder.refundAmount }}元</td>
            <td>联系人:</td>
            <td>{{ ditaillist.customerName }}</td>
          </tr>
          <tr>
            <td>联系人手机号:</td>
            <td>{{ ditaillist.customerPhone }}</td>
            <td>退款金额:</td>
            <td>{{ ditaillist.roomRefundOrder.refundAmount }}元</td>
          </tr>
        </table>
        <hr>
        <p class="askTip"><i class="el-icon-warning warning"/>是否确认操作该订单?</p>
        <div style="width:100%; text-align:center">
          <el-button v-preventReClick :disabled="false" @click="closeDialog">取消</el-button>
          <el-button v-preventReClick type="primary" @click="refund()">确认</el-button>
        </div>
      </div>

      <!-- <el-form v-if="detailMode == 'agreeRefund'" class="storeOrder">
        <h3 class="ml20">订单信息</h3>
        <el-form-item :label-width="labeWidth" label="订单编号">
          <el-input v-model="ditaillist.orderSn" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="下单时间">
          <el-input v-model="ditaillist.createTime" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="房型名称">
          <el-input v-model="ditaillist.roomName" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="类型">
          <el-input v-model="ditaillist.roomType" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="入住日期">
          <el-input v-model="ditaillist.startTime" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="离店日期">
          <el-input v-model="ditaillist.endTime" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="单价">
          <el-input v-model="ditaillist.price" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="间夜数量">
          <el-input v-model="ditaillist.totalNum" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="总价">
          <el-input v-model="ditaillist.totalAmount" disabled="disabled" class="input" />
        </el-form-item>
        <hr>
        <h3 class="ml20">退款信息</h3>
        <el-form-item :label-width="labeWidth" label="退款单号">
          <el-input v-model="ditaillist.totalAmount" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="申请退款时间">
          <el-input v-model="ditaillist.totalAmount" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="订单金额">
          <el-input v-model="ditaillist.totalAmount" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="联系人">
          <el-input v-model="ditaillist.totalAmount" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="联系人手机号">
          <el-input v-model="ditaillist.totalAmount" disabled="disabled" class="input" />
        </el-form-item>
        <el-form-item :label-width="labeWidth" label="退款金额">
          <el-input v-model="ditaillist.totalAmount" disabled="disabled" class="input" />
        </el-form-item>

        <hr>
        <p style="width:100%; text-align:center">是否确认取消该订单?</p>
        <div style="width:100%; text-align:center">
          <el-button v-preventReClick :disabled="false">取消</el-button>
          <el-button v-preventReClick type="primary" @click="refund()">确认</el-button>
        </div>
      </el-form> -->

      <!-- 拒绝退款 -->
      <div v-if="detailMode == 'refusedRefund'">
        <h3 class="ml20">订单信息</h3>
        <table class="table">
          <tr>
            <td>订单编号:</td>
            <td>{{ ditaillist.orderSn }}</td>
            <td>下单时间:</td>
            <td>{{ ditaillist.createTime }}</td>
          </tr>
          <tr>
            <td>房型名称:</td>
            <td>{{ ditaillist.roomName }}</td>
            <td>类型:</td>
            <td>{{ ditaillist.roomType }}</td>
          </tr>
          <tr>
            <td>入住日期:</td>
            <td>{{ ditaillist.checkInTime }}</td>
            <td>离店日期:</td>
            <td>{{ ditaillist.checkOutTime }}</td>
          </tr>
          <tr>
            <td>单价:</td>
            <td>{{ ditaillist.roomSalePrice }}元</td>
            <td>间夜数量:</td>
            <td>{{ ditaillist.totalNum }}</td>
          </tr>
          <tr>
            <td>总价:</td>
            <td>{{ ditaillist.totalAmount }}元</td>
          </tr>
        </table>
        <hr>
        <h3 class="ml20">退款信息</h3>
        <div class="storeOrder_title">
          退款状态：{{ ditaillist.orderStatus | formatRoomOrder }}
        </div>
        <table class="table">
          <tr>
            <td>退款单号:</td>
            <td>{{ ditaillist.roomRefundOrder.refundOrderSn }}</td>
            <td>申请退款时间:</td>
            <td>{{ ditaillist.roomRefundOrder.createTime }}</td>
          </tr>
          <tr>
            <td>订单金额:</td>
            <td>{{ ditaillist.roomRefundOrder.refundAmount }}元</td>
            <td>联系人:</td>
            <td>{{ ditaillist.customerName }}</td>
          </tr>
          <tr>
            <td>联系人手机号:</td>
            <td>{{ ditaillist.customerPhone }}</td>
            <td>退款金额:</td>
            <td>{{ ditaillist.roomRefundOrder.refundAmount }}元</td>
          </tr>
        </table>
        <hr>
        <p class="askTip"><i class="el-icon-warning warning"/>是否确认操作该订单?</p>
        <div style="width:100%; text-align:center">
          <el-button v-preventReClick :disabled="false" @click="closeDialog">取消</el-button>
          <el-button v-preventReClick type="primary" @click="refund()">确认</el-button>
        </div>
      </div>

      <!-- 完成退款 -->
      <div v-if="detailMode == 'finishRefund'">
        <h3 class="ml20">订单信息</h3>
        <table class="table">
          <tr>
            <td>订单编号:</td>
            <td>{{ ditaillist.orderSn }}</td>
            <td>下单时间:</td>
            <td>{{ ditaillist.createTime }}</td>
          </tr>
          <tr>
            <td>房型名称:</td>
            <td>{{ ditaillist.roomName }}</td>
            <td>类型:</td>
            <td>{{ ditaillist.roomType }}</td>
          </tr>
          <tr>
            <td>入住日期:</td>
            <td>{{ ditaillist.checkInTime }}</td>
            <td>离店日期:</td>
            <td>{{ ditaillist.checkOutTime }}</td>
          </tr>
          <tr>
            <td>单价:</td>
            <td>{{ ditaillist.roomSalePrice }}元</td>
            <td>间夜数量:</td>
            <td>{{ ditaillist.totalNum }}</td>
          </tr>
          <tr>
            <td>总价:</td>
            <td>{{ ditaillist.totalAmount }}元</td>
          </tr>
        </table>
        <hr>
        <h3 class="ml20">退款信息</h3>
        <div class="storeOrder_title">
          订单状态：{{ ditaillist.roomRefundOrder.refundOrderStatus | formatRefundStatus }}
        </div>
        <table class="table">
          <tr>
            <td>退款单号:</td>
            <td>{{ ditaillist.roomRefundOrder.refundOrderSn }}</td>
            <td>申请退款时间:</td>
            <td>{{ ditaillist.roomRefundOrder.createTime }}</td>
          </tr>
          <tr>
            <td>订单金额:</td>
            <td>{{ ditaillist.roomRefundOrder.refundAmount }}元</td>
            <td>联系人:</td>
            <td>{{ ditaillist.customerName }}</td>
          </tr>
          <tr>
            <td>联系人手机号:</td>
            <td>{{ ditaillist.customerPhone }}</td>
            <td>退款金额:</td>
            <td>{{ ditaillist.roomRefundOrder.refundAmount }}元</td>
          </tr>
        </table>
        <hr>
        <p class="askTip"><i class="el-icon-warning warning"/>是否确认操作该订单?</p>
        <div style="width:100%; text-align:center">
          <el-button v-preventReClick :disabled="false" @click="closeDialog">取消</el-button>
          <el-button v-preventReClick type="primary" @click="refund()">确认</el-button>
        </div>
      </div>

      <!-- 退单详情 -->
      <div v-if="detailMode == 'refundDetail'">
        <h3 class="ml20">订单信息</h3>
        <table class="table">
          <tr>
            <td>订单编号:</td>
            <td>{{ ditaillist.orderSn }}</td>
            <td>下单时间:</td>
            <td>{{ ditaillist.createTime }}</td>
          </tr>
          <tr>
            <td>房型名称:</td>
            <td>{{ ditaillist.roomName }}</td>
            <td>类型:</td>
            <td>{{ ditaillist.roomType }}</td>
          </tr>
          <tr>
            <td>入住日期:</td>
            <td>{{ ditaillist.checkInTime }}</td>
            <td>离店日期:</td>
            <td>{{ ditaillist.checkOutTime }}</td>
          </tr>
          <tr>
            <td>单价:</td>
            <td>{{ ditaillist.roomSalePrice }}元</td>
            <td>间夜数量:</td>
            <td>{{ ditaillist.totalNum }}</td>
          </tr>
          <tr>
            <td>总价:</td>
            <td>{{ ditaillist.totalAmount }}元</td>
          </tr>
        </table>
        <hr>
        <h3 class="ml20">退款信息</h3>
        <div class="storeOrder_title">
          退款状态：{{ ditaillist.roomRefundOrder.refundOrderStatus | formatRefundStatus }}
        </div>
        <table class="table">
          <tr>
            <td>退款单号:</td>
            <td>{{ ditaillist.roomRefundOrder.refundOrderSn }}</td>
            <td>申请退款时间:</td>
            <td>{{ ditaillist.roomRefundOrder.createTime }}</td>
          </tr>
          <tr>
            <td>订单金额:</td>
            <td>{{ ditaillist.roomRefundOrder.refundAmount }}元</td>
            <td>联系人:</td>
            <td>{{ ditaillist.customerName }}</td>
          </tr>
          <tr>
            <td>联系人手机号:</td>
            <td>{{ ditaillist.customerPhone }}</td>
            <td>退款金额:</td>
            <td>{{ ditaillist.roomRefundOrder.refundAmount }}元</td>
          </tr>
        </table>
        <div v-if="ditaillist.roomRefundOrder.operateName || ditaillist.roomRefundOrder.operateTime">
          <hr>
          <h3 class="ml20">退款操作</h3>
          <table class="table">
            <tr>
              <td v-if="ditaillist.roomRefundOrder.operateName">操作人员:</td>
              <td v-if="ditaillist.roomRefundOrder.operateName">{{ ditaillist.roomRefundOrder.operateName }}</td>

              <td v-if="ditaillist.roomRefundOrder.operateTime">操作时间:</td>
              <td v-if="ditaillist.roomRefundOrder.operateTime">{{ ditaillist.roomRefundOrder.operateTime }}</td>
              <!-- 无操作人的时候左右对齐 加俩td -->
              <td v-if="!ditaillist.roomRefundOrder.operateName"/>
              <td v-if="!ditaillist.roomRefundOrder.operateName"/>
            </tr>
          </table>
        </div>

        <!-- <p class="askTip"><i class="el-icon-warning warning"/>是否确认操作该订单?</p>
        <div style="width:100%; text-align:center">
          <el-button v-preventReClick :disabled="false">取消</el-button>
          <el-button v-preventReClick type="primary" @click="refund()">确认</el-button>
        </div> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  filters: {
    formatRoomOrder(orderStatus) {
      const storeOrderMap = {
        0: '待支付',
        100: '已支付(待确认订单)',
        200: '已确认(确认有房)',
        210: '已入住',
        220: '未入住',
        230: '未操作',
        310: '已完成(已入住)',
        320: '已完成(未入住)',
        330: '已完成(未操作)',
        400: '申请退款',
        410: '已退款',
        420: '拒绝退款'
      }
      if (orderStatus === -100) {
        return '已取消'
      } else {
        return storeOrderMap[orderStatus]
      }
    },
    /**
         * 待审核
         */
    // PENDING_REVIEWING(0),
    /**
         * 退款中
         */
    //  REFUNDING(1),
    /**
         * 已退款
         */
    // REFUNDED(2),
    /**
         * 已拒绝
         */
    // REFUSED(3),
    /**
         * 退款失败
         */
    // REFUND_FAIL(4),
    /**
         * 退款异常
         */
    // REFUND_CHANGE(5),
    /**
         * 退款关闭
         */
    // REFUND_CLOSE(6)
    formatRefundStatus(orderStatus) {
      const storeOrderMap = {
        0: '待审核',
        1: '退款中',
        2: '已退款',
        3: '已拒绝',
        4: '退款失败',
        5: '退款异常',
        6: '退款关闭'
      }
      return storeOrderMap[orderStatus]
    }
  },
  props: {
    dialogdata: {
      type: Array,
      required: true
    },
    detialvisible: {
      type: Boolean,
      required: true
    },
    myindex: {
      type: Number,
      required: true
    },
    detailMode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      ditaillist: {},
      detailIndex: 0,
      roleName: '',
      loginTime: '',
      nickName: '',
      labeWidth: '120px'
    }
  },
  computed: {
    formatTitle() {
      return function(val) {
        // console.log('弹出框的标题：：：', val)
        const map = {
          'refundDetail': '退单详情'
        }
        return map[val] || '操作订单'
      }
    }
    // formatLevel(level) {
    //   const levelMap = {
    //     1: '泰山美妈',
    //     2: '泰山美妈团',
    //     3: '泰山美妈社',
    //     4: '泰山美妈会'
    //   }
    //   return levelMap[this.ditaillist.level]
    //   // return this.ditaillist.status === 1 ? '启用' : '禁用'
    // },
    // formatVipId(vipId) {
    //   const vipIdMap = {
    //     1: '泰山美妈',
    //     2: '泰山美妈团',
    //     3: '泰山美妈社',
    //     4: '泰山美妈会'
    //   }
    //   return vipIdMap[this.ditaillist.vipId]
    // },
    // formatztName(name) {
    //   return this.ditaillist.ztName || '-'
    // },
    // formatdtName(name) {
    //   return this.ditaillist.dtName || '-'
    // },
    // // 分享提成
    // shareCommission() {
    //   return this.ditaillist.promotionCommission / this.ditaillist.number
    // },
    // salesCommission() {
    //   return this.ditaillist.salesCommission / this.ditaillist.number
    // },
    // formatCreateTime() {
    //   return this.$options.filters['formatDate'](this.ditaillist.createTime)
    // },
    // formatLoginTime() {
    //   if (this.ditaillist.userLoginRecord) {
    //     return this.$options.filters['formatDate'](this.ditaillist.userLoginRecord.loginTime)
    //   } else {
    //     return ''
    //   }
    // },
    // formatStatus() {
    //   return this.ditaillist.status === 1 ? '启用' : '禁用'
    // },
    // formatBankCard() {
    //   if (this.ditaillist.bankCardInfo.bankCard) {
    //     return this.$options.filters['hideBankCard'](this.ditaillist.bankCardInfo.bankCard)
    //   } else {
    //     return ''
    //   }
    // },
    // formatBankCard1() {
    //   if (this.ditaillist.bankCard) {
    //     return this.$options.filters['hideBankCard'](this.ditaillist.bankCard)
    //   } else {
    //     return ''
    //   }
    // },
    // formatBankCardPlatform() {
    //   if (this.ditaillist.bankInfo) {
    //     return this.$options.filters['hideBankCard'](this.ditaillist.platformAccount)
    //   } else {
    //     return ''
    //   }
    // },
    // formatGoodsQuoted() {
    //   if (this.ditaillist.goodsAmount && this.ditaillist.goodsQuantity) {
    //     return this.ditaillist.goodsAmount / this.ditaillist.goodsQuantity
    //   }
    // },
    // formatTotalPirce() {
    //   if (this.ditaillist.goodsAmount && this.ditaillist.goodsQuantity) {
    //     return this.ditaillist.goodsAmount + this.ditaillist.postageAmount
    //   }
    // },
    // // 拼接详细地址
    // detailAddress() {
    //   if (this.ditaillist.receiverProvince === '北京市' || this.ditaillist.receiverProvince === '天津市') {
    //     return this.ditaillist.receiverProvince + this.ditaillist.receiverDetailAddress + this.ditaillist.receiverCounty
    //   } else {
    //     return this.ditaillist.receiverProvince + this.ditaillist.receiverCity + this.ditaillist.receiverCounty + this.ditaillist.receiverDetailAddress
    //   }
    // }

  },
  watch: {
    myindex(val) {
      this.detailIndex = val
      this.ditaillist = this.dialogdata[this.detailIndex]
      // console.log(this.ditaillist)
      // if (this.ditaillist.role) {
      //   console.log(this)
      //   this.roleName = this.ditaillist.role.name
      // }
      // if (this.ditaillist.userLoginRecord) {
      //   this.loginTime = this.ditaillist.userLoginRecord.loginTime
      // }
      // this.nickName = this.ditaillist.wxUser.nickName
    }
  },
  methods: {
    // 同意退款, 完成退款，拒绝退款
    refund() {
      this.$emit('refund', this.ditaillist.roomRefundOrder.id)
      this.closeDialog()
    },
    // 确认有房
    confirmRoom() {
      this.$emit('confirmOrder', this.ditaillist.id)
      this.closeDialog()
    },
    // 取消
    cancelRoom() {
      this.$emit('cancelOrder', this.ditaillist.id)
      this.closeDialog()
    },
    cancel() {
      this.closeDialog()
    },
    closeDialog() {
      this.$emit('update:detialvisible', false)
      this.$emit('update:myindex', -1)
    }
  }
}
</script>

<style scoped>

  .detailWarp .el-dialog .el-dialog__body{
        padding: 10px 20px 20px 20px
    }
  .f_red{
      color:red
  }
  .detailWarp{
    padding-bottom:20px;
  }
  .el-dialog{
    padding-bottom:20px;
  }
  .el-form{
    padding-bottom: 20px;
  }
  .storeOrder .el-form-item{
      margin-bottom: 10px;
  }

   .ml20{
        margin-left: 20px;
    }

  .storeOrder_title{
      padding:10px;
      margin:10px;
      margin-bottom:20px;
      background: #f5f5f5;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
  }

  hr{
      border: 1px solid #eee;
      margin: 20px 0;
  }

  .table{
      width:90%;
      line-height: 40px;
  }

  .table td:nth-of-type(odd){
      width:18%;
      text-align: right;
      font-weight: bold;
      vertical-align: top;
  }

  .table td:nth-of-type(even){
      width:32%;
      text-align: left;
      padding-left: 1%;
      color: #999;
      vertical-align: top;
  }

  .table td span{
      font-weight: bold;
      margin-right: 1%;
  }

  .askTip{
      width:100%;
      text-align:center;
      line-height: 60px;
      font-weight: bold;
  }

  .warning{
      color: #E6A23C;
      margin-right: 4px;
  }
</style>
